<template>
  <div class="map">
    <div class="bottomlefts">
      <div class="tiptitle">小胖科技前置仓实时数据</div>
      <div class="titleh2s">
         <!-- <h1>{{nowTime}} {{this.time}}</h1> -->
        <p class="houres">
          <span>{{this.today | dateFmt }}</span>
          <span>{{this.time}}</span>
          <!-- <span>{{this.today | dateFmt('hh:ss:mm') }}</span> -->
        </p>
      </div>
      <div class="nolisdt" v-if="isEmpty">
      <text class="empty-car-tips">暂无数据</text>
    </div>
      <div class="tablemain" else>
        <div class="titletiplist">
          <p>前置仓地址</p>
          <p>商品名称</p>
          <p>标准库存</p>
          <p>当前库存</p>
          <p>应补仓量</p>
           <p>仓库管理员</p>
          <p>联系方式</p>
        </div>
        <div class="titlemain">
          <div
            class="titlelists"
            v-for="(items,index) in  list"
            :key="index"
            ref="rollul"
            :class="{anim:animate==true}"
          >
            <p >{{items.storeName}}</p>
            <p>{{items.productName}}</p>
              <p>{{items.standardStock}}</p>
            <p>{{items.todayStock}}</p>
            <p v-if="items.replenismentStock<=0">0</p>
             <p v-else-if="items.replenismentStock>0">{{items.replenismentStock}}</p>
            <p>{{items.leaderName}}</p>
            <p>{{items.leaderContactTel}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setInterval } from 'timers';
import store from '@/store/index'
import {
    getToken
} from '@/utils/auth';

export default {
  data() {
    return {
        isEmpty: false, //购物车是否为空
      animate: true,
      today: "", //日期
       hours:'',
      list: [

      ],
       year:'',
      month:'',
      date:'',
      hh:'',
      mm:'',
      nowTime:''
    };
  },
    mounted() {
    //整个页面刷新
    // this.nowTimes();
    if(this.timer){
      clearInterval(this.timer);
    }else{
      this.timer=setInterval(()=>{
        this. websocketclose()
         this.initWebSocket()
      },60000)
    }
     
  },
  created() {
    //获取日期
    const weekDay = [
      "星期天",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    ];
    this.today = new Date();
    this.time = weekDay[this.today.getDay()];

    //页面刚进入时开启长连接
    this.initWebSocket();
    setInterval(this.scroll, 2000);
    //从store中获取token
     if (store.getters.token) {
     // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
         this.token =getToken()
        
    }
  },  
  methods: {
     initWebSocket() {
     
      let authToken = encodeURI(this.token);
              (this.websock = new WebSocket(
        "ws://120.79.194.99:8003/managerapi/finance/storeDayData?authToken=" +
          authToken
      
          //   "ws://192.168.0.133:8003/managerapi/finance/storeDayData?authToken=" +
          // authToken
      )),
        (this.websock.onopen = this.websocketonopen),
        (this.websock.onmessage = this.websocketonmessage);
      this.websock.onclose = this.websocketclose;
        // alert("start");
    },
    websocketonopen() {},
    websocketonmessage(res) {
        // alert(res);
      //数据接收
      const result = JSON.parse(res.data);
      console.log(result);
      this.goodlist = result.data;
      console.log(this.goodlist.stockChangeList.length);
      // 调用Object.keys  判断是否还有数据，没有显示暂无数据
      const goodlist = Object.keys(this.goodlist);
       console.log(this.goodlist.length);
      if (goodlist.length === 0 || goodlist.length == null) {
        this.isEmpty = true;
        return;
      }
       this.isEmpty = false;
      this.list = this.goodlist.stockChangeList;
       console.log(this.list);
    },

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    onbeforeunload() {
      websocketclose();
    },

    websocketclose(e) {
      console.log("断开连接", e);
    },
    scroll() {
      let con1 = this.$refs.rollul;
      // con1[0].style.marginTop = "0px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.list.push(that.list[0]);
        that.list.shift();
        // con1[0].style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 100);
    }
  }
};
</script>
<style lang="less">
span{
  border: none
}
.bottomlefts {
  width: 100%;
  height: 768px;
  background-color: #25273e;
  .titleh2s {
    margin-top: 20px;
    height:80px;
    text-align: center;
    color: #5f5e62;
    line-height: 80px;
   .houres{
     font-size: 30px;
     span{
       margin-left: 10px;
        border: none
     }
   }
  }
  .tiptitle {
    height:40px;
    font-size: 42px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(254, 254, 254, 1);
    line-height: 40px;
    text-align: center;
    padding-top: 20px;
  }
  .titlemain {
    height:490px;
    padding-left: 15px;
    margin-bottom: 80px;
    margin: 10px auto;
    overflow: hidden;
    transition: all 0.5s;
    .titlelists {
      height: 100px;
      line-height: 100px;
      color:#33c81b;
       &:first-child{
        color:#FF0202
      }
    }
  }

  .anim {
    transition: all 0.5s;
  }
}
.tablemain {
   margin-bottom: 30px;
  // margin-top: 20px;
  .titletiplist,
  .titlelists {
    // margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100px;

    p {
      height: 32px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
   
     
    }

  }
  .titletiplist p {
 
 
 font-size: 28px;
    color: rgba(248, 217, 71, 1);
  }
  // .titlelist:nth-child(even) {
  //   background-color: #292b47;
  // }
  .titlelists:nth-child(odd) {
    background-color: #32355c;
  }
}
</style>


